[자바스크립트] 테이블에서 해당 열의 인덱스 값 얻는 방법

웹페이지에서 테이블 또는 리스트 형태의 그리드를 UI로 구현하는 경우가 많습니다. 예를들어 어떤 어드민 사이트에서 회원 리스트를 보여주는 경우 이름, 나이 등의 정보를 리스트해 보여줄 수 있죠.

# 만약 해당 row가 몇 번째 해당하는지 알려면?

리스트에서 홍길동이란 이름을 가진 사람을 찾아야합니다. 해당하는 엘리먼트가 몇 번째인지 알려면 어떻게할까요? 엘리먼트가 부모로부터 몇번째 요소인지 확잊해야겠지만 table 태그를 사용하는 경우라면 rowIndex를 사용할 수 있습니다.

! rowIndex 사용하여 해당 row index값 얻기

table 요소의 tr 태그... 즉 row에 해당하는 엘리먼트에 적용할 수 있으며 rowIndex는 해당하는 Index값을 반환하게됩니다. 이때 위에서부터 0부터 1, 2, 3 ... 순서로 반환합니다. 그럼 아래에서 더 자세히 예제로 알아봅니다.


회원 리스트를 예로 들어봅니다. 만약 아래와 같이 회원들의 이름이 존재하는 table 태그가 있습니다. 여기서 만약 select 클래스명을 가진 tr 태그가 몇 번째인지 확인하려면 어떻게 할까요?
@ tr_index.html

아래의 스크립트는 해당 인덱스값을 찾아 alert()을 사용하여 출력합니다.
@ tr_index.js

이제 버튼을 누르면 해당값이 화면에 출력될 것입니다.결과는 4번째이므로 0, 1, 2, 3 순서에 따라서 3이 출력될 것입니다. 아래에서 직접 눌러보세요.

# rowIndex 예제 동작해보기

아래는 위 예제를 실제로 구현한 부분입니다. 버튼을 클릭하세요.